import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Button, Row, Col, Divider, Space, Tag } from 'antd';
import FormCondition from '@/components/FormCondition';
import DrawerCondition from '@/components/DrawerCondition';

const SetForm = (props) => {
    const { dispatch, visible = {}, onClose, handleCallback, loading, } = props;
    const { show = false, detail = {} } = visible;
    const { id, username, mobile } = detail;
    const [form] = Form.useForm();
    const [combineType, setOriWechat] = useState('withWechat')
    // 新增修改 传id修改 不传id新增
    const [oriCardFlag, setOriCard] = useState('0')


    const formItems = [
        {
            label: '合并客户(B)', type: 'customer', filterList: (e) => {
                return e.map(item => {
                    const { username, mobile } = item
                    if (item.id === id) {
                        return {
                            ...item,
                            username: username + `(${mobile})`,
                            disabled: true,
                        }
                    }
                    else if (!mobile) {
                        return item
                    }
                    return {
                        ...item,
                        username: username + `(${mobile})`
                    }
                })
            }, name: 'oriUserId'
        },
        {
            label: '合并类型',
            type: 'radio',
            name: 'combineType',
            onChange: (e) => {
                setOriWechat(e.target.value)
            },
            select: {
                'withWechat': "A改为B手机B微信",
                'notWithWechat': 'A改为B手机',
                'selectUser': 'A改为B手机C微信',
                'onlyWechat': 'A改为B微信',
            }
        },
        {
            label: '微信合并客户(C)',
            type: 'customer',
            filterList: (e) => {
                return e.map(item => {
                    const { username, mobile } = item
                    if (item.id === id) {
                        return {
                            ...item,
                            username: username + `(${mobile})`,
                            disabled: true,
                        }
                    }
                    else if (!mobile) {
                        return item
                    }
                    return {
                        ...item,
                        username: username + `(${mobile})`
                    }
                })
            },
            visible: combineType === 'selectUser',
            name: 'oriWechatUserId'
        },


        {
            label: '合并实名类型',
            type: 'radio',
            name: 'oriCardFlag',
            onChange: (e) => {
                setOriCard(e.target.value)
            },
            select: {
                0: "A改为B实名信息",
                1: 'A保留实名信息',
                2: 'A改为D实名信息'
            }
        },
        {
            label: '微信合并客户(D)',
            type: 'customer',
            filterList: (e) => {
                return e.map(item => {
                    const { username, mobile } = item
                    if (item.id === id) {
                        return {
                            ...item,
                            username: username + `(${mobile})`,
                            disabled: true,
                        }
                    } else if (!mobile) {
                        return item
                    }
                    return {
                        ...item,
                        username: username + `(${mobile})`
                    }
                })
            },
            visible: oriCardFlag === '2',
            name: 'oriIdCardUserId'
        },
    ];
    useEffect(() => {
        if (!show) {
            setOriWechat('withWechat')
            setOriCard('0')
        }
    }, [show])
    const formItemLayout = {
        labelCol: {

        },
        wrapperCol: {

        },
    };
    console.log(detail, 'detail')
    const fetchRoleEdit = () => {
        form.validateFields().then(async (values) => {
            const { id } = detail;
            const { combineType, oriUserId, oriIdCardUserId, oriCardFlag } = values;
            const payload = {
                targetUserId: id,
                oriUserId,
                combineType
            }

            if (combineType === 'withWechat' || combineType === 'onlyWechat') {
                payload.oriWechatUserId = oriUserId
            }
            if (combineType === 'notWithWechat') {
                payload.oriWechatUserId = id
            }
            if (combineType === 'selectUser') {
                payload.oriWechatUserId = values.oriWechatUserId
            }
            if (oriCardFlag === '0') {
                payload.oriIdCardUserId = oriUserId
            }
            if (oriCardFlag === '1') {
                payload.oriIdCardUserId = id
            }
            if (oriCardFlag === '2') {
                payload.oriIdCardUserId = values.oriIdCardUserId
            }
            dispatch({
                type: 'user/fakeCombineUser',
                payload: payload,
                callback: () => {
                    onClose();
                    handleCallback && handleCallback()
                },
            });
        });
    };


    const modalProps = {
        title: `合并客户`,
        visible: show,
        width: 960,
        onClose,
        footer: <Button type="primary" loading={loading} onClick={fetchRoleEdit}>
            确定
        </Button>,
    };
    return (
        <DrawerCondition {...modalProps}>
            <Row gutter={[24, 24]}>
                <Col span={24}>当前客户{'(A)'}:</Col>
                <Col span={12}>姓名:{username}</Col>
                <Col span={12}>手机号:{mobile}</Col>
                <Col span={24}>
                    <FormCondition formItemLayouts={formItemLayout} form={form} formItems={formItems} initialValues={{ combineType: 'withWechat' }} ></FormCondition>
                </Col>
            </Row>

        </DrawerCondition>
    );
};

export default connect(({ loading }) => ({
    loading: loading.effects['user/fakeCombineUser'],
}))(SetForm);
